import React, { Component } from 'react';
import { CSSTransition } from 'react-transition-group'
import './Boss.css'

class Boss extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            isShow:true
         }
         this.ToToggole = this.ToToggole.bind(this)
    }
    render() { 
        return ( 
            <div>
                <CSSTransition in={this.state.isShow} timeout={2000} classNames="box-test" unmountOnExit>
                    <h1 className={this.state.isShow ? 'show' : 'hide'} >boss 元素是 猪八戒</h1>
                </CSSTransition>
                <button onClick={this.ToToggole}>召唤boss</button>
            </div>
         );
    }
    ToToggole(){
        this.setState({
            isShow:this.state.isShow ? false : true
        })
    }
}
 
export default Boss;